import { useState } from "react";
import {
  HeartFilled,
  HeartOutlined,
  StarFilled,
  StarOutlined,
  RocketFilled,
  RocketOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Avatar } from "antd";
import "./index.scss";
import avatarImg from "@/assets/ikun.jpg";

interface sideData {
  func: funcT;
  authorMsg: authorMsgT;
}
interface authorMsgT {
  avatar: string; //头像
  userId: number;
}
interface funcT {
  heart: boolean; //点赞
  star: boolean; //收藏
  rocket: boolean; //投币
}

export default function funcSide(props: sideData) {
  const { authorMsg, func } = props;
  const { heart = false, star = false, rocket = false } = func;
  const [isheart, setHeart] = useState(heart);
  const [isStar, setStar] = useState(star);
  const [isRocket, setRocket] = useState(rocket);

  return (
    <div className="func-side">
      <div className="author">
        <Avatar src={avatarImg} size={48} icon={<UserOutlined />} />
        {/* <img className="avatar-img" src={avatarImg} /> */}
      </div>
      <div className="func">
        <IconItem
          isAct={isheart}
          icon={<HeartOutlined />}
          actionIcon={<HeartFilled />}
          handle={setHeart}
        />
        <IconItem
          isAct={isStar}
          icon={<StarOutlined />}
          actionIcon={<StarFilled />}
          handle={setStar}
        />
        <IconItem
          isAct={isRocket}
          icon={<RocketOutlined />}
          actionIcon={<RocketFilled />}
          handle={setRocket}
        />
      </div>
    </div>
  );
}
interface iconT {
  actionIcon: any;
  icon: any;
  isAct: boolean;
  handle: (isAct: boolean) => any;
}
function IconItem(props: iconT) {
  const { actionIcon, icon, isAct, handle } = props;
  return <div onClick={() => handle(!isAct)}>{isAct ? actionIcon : icon}</div>;
}
